<template>
  <div>
    <div class="top">
      <p class="p1">精华评论</p>
      <p class="p2">({{ comment.length }}评论)</p>
    </div>
    <div class="comment" v-for="item in comment" :key="item.comment">
      <div class="com_top">
        <img
          src="https://img.zcool.cn/community/01d02d5684964b32f8759f04645b4f.jpg@3000w_1l_2o_100sh.jpg"
          alt=""
        />
        <div class="com_t_r">
          <div class="com_r_r_l">
            <span class="sp1">{{ username }}</span>
            <star v-model="value" allow-half  readonly void-color="#eee" size="16px" color="red"></star>
          </div>
          <div class="com_r_r_r">
            <span class="sp2">
              {{ item.date }}
            </span>
          </div>
        </div>
      </div>
      <div class="com_bot">
        <span>
            {{ item.comment }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comment: [],
      username: "",
      value: 4.5,
    };
  },
  //获取存储中评论中的内容
  created() {
    this.comment = JSON.parse(localStorage.getItem("bookStore")).commentshelf;
    //解构 出username的数值
    const {
      user: {
        userLogin: { username },
      },
    } = JSON.parse(localStorage.getItem("bookStore"));
    this.username = username;
  },
};
</script>

<style lang="scss" src="./style.scss" scoped></style>